<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>header组件</title>
    <link rel="stylesheet" href="../material-demo/dist/css/material-components-web.min.css">
    <link rel="stylesheet" href="../material-demo/dist/css/icon.css">
    <link rel="stylesheet" href="../material-demo/dist/css/material.indigo-pink.min.css">

    <style>
        .mdl-layout__container{
            height: calc(100% - 42px);
        }
        .mdc-button--unelevated:not(:disabled){
            /* background-color: #999999;
            color: #000000; */
        }
        .content-title-container{
            background-color: #EBA9AA;
            height: 30px;
        }
        .content-title-font{
            font-size: 20px;
        }
        .mdl-navigation{
            /* background-color: #464860; */
        }
        .mdl-layout__drawer .mdl-navigation .mdl-navigation__link{
            color: #ffffff;
            background-color: #38394B;
            border-top: 1px solid #868584;
        }
        .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-text-field__input{
            padding-left: 40px;
            padding-right: 7px;
            width: 145px;
        }
        .mdc-text-field {
            /* height: 40px; */
        }
        .mdc-select__anchor{
            /* height: 40px; */
        }
        .mdc-select--outlined .mdc-select__selected-text{
            /* padding-top: 6px;
            padding-bottom: 6px; */
            /* height: 40px; */
        }
        .mdl-data-table{
            width: 100%;
        }
        
    </style>
  </head>
  <body>
    <!-- <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Title</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation mdl-layout--large-screen-only">
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
            </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Title</span>
            <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="page-content"></div>
        </main>
    </div> -->
    
    <!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
    <!-- <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
        <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
        </nav>
        </div>
        <main class="mdl-layout__content">
        <div class="page-content"></div>
        </main>
    </div> -->

    <div class="mdl-grid" style="height: 42px; border-bottom: 2px solid;">
        <div class="mdl-cell mdl-cell--1-col">icon</div>
        <div class="mdl-cell mdl-cell--3-col">大有注册绑定工具</div>
        <div class="mdl-cell mdl-cell--5-col"></div>
        <div class="mdl-cell mdl-cell--1-col">周宜亮</div>
        <div class="mdl-cell mdl-cell--1-col">部门：运维部</div>
        <div class="mdl-cell mdl-cell--1-col">关闭</div>
    </div>
    <!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer" style="height: calc(100% - 42px);">
        
        <div class="mdl-layout__drawer">
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">生产</a>
            <a class="mdl-navigation__link" href="">出厂</a>
            <a class="mdl-navigation__link" href="">入库</a>
            <a class="mdl-navigation__link" href="">出库</a>
            <a class="mdl-navigation__link" href="">分发</a>
            <a class="mdl-navigation__link" href="">布放</a>
            <a class="mdl-navigation__link" href="">项目</a>
            <a class="mdl-navigation__link" href="">客户管理</a>
            <a class="mdl-navigation__link" href="">个人信息</a>
            <a class="mdl-navigation__link" href="">追踪溯源</a>
            <a class="mdl-navigation__link" href="">客户管理</a>
        </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="page-content">
                <div class="mdl-grid" style="height: 42px;">
                    <div class="mdl-cell mdl-cell--2-col">  
                        <button class="mdc-button mdc-button--unelevated">
                            <span class="mdc-button__ripple"></span> 请求生产
                        </button>
                    </div>
                    <div class="mdl-cell mdl-cell--2-col"></div>
                    <div class="mdl-cell mdl-cell--2-col"></div>
                    <div class="mdl-cell mdl-cell--1-col"></div>
                    <div class="mdl-cell mdl-cell--1-col"></div>
                    <div class="mdl-cell mdl-cell--1-col"></div>
                    <div class="mdl-cell mdl-cell--3-col">2020年1月5日 星期日 09:08:18 AM</div>
                </div>
                <div class="mdl-grid content-title-container">
                    <div class="mdl-cell mdl-cell--1-col">
                        icon
                    </div>
                    <div class="mdl-cell mdl-cell--3-col">
                        <span class="content-title-font">生产事务一览</span>
                    </div>
                </div>
                <div class="mdl-grid">
                    <div class="mdl-cell mdl-cell--1-col" style="font-size: 12px; line-height: 56px;">
                        <span>发起时间：</span>
                    </div>
                    <div class="mdl-cell mdl-cell--5-col">
                        <div class="mdc-text-field text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
                            <i class="material-icons mdc-text-field__icon">event</i>
                            <input type="text" id="text-field-outlined-leading" class="mdc-text-field__input" aria-describedby="text-field-outlined-leading-helper-text">
                            <div class="mdc-notched-outline mdc-notched-outline--upgraded"><div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch" style="">
                                    <label class="mdc-floating-label" for="text-field-outlined-leading" style="">选择开始日期</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                        </div>
                        <div class="mdc-text-field text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
                            <i class="material-icons mdc-text-field__icon">event</i>
                            <input type="text" id="text-field-outlined-leading" class="mdc-text-field__input" aria-describedby="text-field-outlined-leading-helper-text">
                            <div class="mdc-notched-outline mdc-notched-outline--upgraded"><div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch" style="">
                                    <label class="mdc-floating-label" for="text-field-outlined-leading" style="">选择结束日期</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--1-col" style="font-size: 12px; line-height: 56px;">状态：</div>
                    <div class="mdl-cell mdl-cell--2col">
                        <div class="mdc-select mdc-select--outlined demo-enhanced-select">
                            <div class="mdc-select__anchor custom-enhanced-select-width">
                                <i class="mdc-select__dropdown-icon"></i>
                                <div id="demo-selected-text" class="mdc-select__selected-text" tabindex="0" aria-disabled="false"></div>
                                <div class="mdc-notched-outline mdc-notched-outline--upgraded">
                                    <div class="mdc-notched-outline__leading"></div>
                                    <div class="mdc-notched-outline__notch">
                                        <label id="outlined-label" class="mdc-floating-label" style="">Fruit</label>
                                    </div>
                                    <div class="mdc-notched-outline__trailing"></div>
                                </div>
                            </div>
                            <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-enhanced-select custom-enhanced-select-width ">
                                <ul class="mdc-list">
                                    <li data-value="" disabled="" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1"></li>
                                    <li data-value="apple" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">Apple</li>
                                    <li data-value="orange" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">Orange</li>
                                    <li data-value="banana" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">Banana</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--1-col">
                            <button class="mdc-button mdc-button--unelevated" style="margin-top: 10px;">
                                <span class="mdc-button__ripple"></span> 查询
                            </button>
                    </div>
                </div>
                <div class="mdl-grid">
                        <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
                                <thead>
                                  <tr>
                                    <th class="mdl-data-table__cell--non-numeric">事务名称</th>
                                    <th>描述</th>
                                    <th>发起人</th>
                                    <th>发起时间</th>
                                    <th>状态</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td class="mdl-data-table__cell--non-numeric">第一批生产</td>
                                    <td>2020年第一批生产请求</td>
                                    <td>王卫松</td>
                                    <td>2020年1月5日10:32:07</td>
                                    <td>待处理</td>
                                  </tr>
                                </tbody>
                              </table>
                </div>
            </div>
        </main>
    </div>
    
    


    <script src="../material-demo/dist/js/material-components-web.min.js"></script>
    <script src="../material-demo/dist/js/material.min.js"></script>
    <script></script>
  </body>
</html>
